import { useEffect, useRef, useState } from 'react';
import { Table, Tag, Button, Tabs } from 'antd';
import { history } from 'umi'
import { statusColorMap, statusTextMap } from '../index/params';
import { queryTodoList } from '@/services/okr'
import { queryTodoProjectList } from '@/services/project'
import { statusColorMap as projectColor, statusTextMap as projectText } from '../project/params';
import styles from './index.less';


const TodoPage = (props) => {
  const [data, setData] = useState([]);
  const [keys, setKeys] = useState('2')

  useEffect(()=>{
   getDataList()
  // initData()
  }, [])
  let cacheList = [
    {
      username: '王伟',
      source: 'okr',
      time: '1',
      oneself: '0',
      type: '1',
      content: '培训组员学习react框架，需求整理完整，并实际开始搭建项目前端部分，第一轮冒烟测试完成',
      year: '2023',
      quarter: '1',
      key: '1',
    },
    {
      username: '王伟',
      source: 'okr',
      time: '1',
      oneself: '0',
      type: '1',
      content: '低代码平台构建开发达到50%，开始第二轮需求整理，流程开发，公共模块完成统一构建部署，编写对应开发文档',
      year: '2023',
      quarter: '2',
      key: '2',

    },
    {
      username: '王伟',
      source: 'okr',
      time: '1',
      oneself: '0',
      type: '1',
      content: '打造公文系统产品化、全面化，输出完整的公文流程文档',
      year: '2023',
      quarter: '3',
      key: '3',

    },
    {
      username: '王伟',
      source: 'okr',
      time: '1',
      oneself: '0',
      type: '1',
      content: '带领组员共同掌握代码审查工具，代码质量评审达到100%',
      year: '2023',
      quarter: '4',
      key: '4',

    },
    {
      username: '王伟',
      source: 'okr',
      time: '2',
      oneself: '0',
      type: '2',
      content: '【中台系统构建开发】【人员编制优化】',
      year: '2023',
      key: '14',

    },
    {
      username: '刘强',
      source: 'okr',
      time: '1',
      oneself: '0',
      type: '1',
      content: '完成公司尖端新品项目的理论设计及总体验证工作',
      year: '2023',
      quarter: '1',
      key: '5',

    },
    {
      username: '刘强',
      source: 'okr',
      time: '1',
      oneself: '0',
      type: '1',
      content: '完成公司对应K-S系列产品的研发工作',
      year: '2023',
      quarter: '2',
      key: '6',

    },
    {
      username: '曹凯',
      source: 'okr',
      time: '1',
      oneself: '0',
      type: '2',
      content: '提高研发效率，同等时间下任务数比上季度提升10%',
      year: '2023',
      key: '7',

    },
    {
      username: '刘博正',
      source: 'okr',
      time: '1',
      oneself: '0',
      type: '1',
      content: '提升服务质量，减少客户投诉',
      year: '2023',
      key: '8',

    },
    {
      username: '刘广美',
      source: 'okr',
      time: '1',
      oneself: '0',
      type: '1',
      content: '确保各部门人力资源充足，完成Q2季度考核目标',
      year: '2023',
      quarter: '2',
      key: '9',

    },
    {
      username: '刘广美',
      source: 'okr',
      time: '1',
      oneself: '0',
      type: '1',
      content: '中台系统构建',
      year: '2023',
      key: '10',

    },
    {
      username: '刘强',
      source: 'okr',
      time: '1',
      oneself: '0',
      type: '1',
      content: '中台系统构建',
      year: '2023',
      key: '11',

    },
    {
      username: '王伟',
      source: 'okr',
      time: '1',
      oneself: '0',
      type: '1',
      content: '中台系统构建',
      year: '2023',
      key: '12',

    },
    {
      username: '王伟',
      source: 'okr',
      time: '1',
      oneself: '0',
      type: '1',
      content: '中台系统构建',
      year: '2023',
      key: '13',

    }
  ]
  const initData = () => {
    
    setData(list)
  }
  const getDataList = async () => {
    const res1 = await queryTodoList();
    // const res2 = await queryTodoProjectList();
    if(res1.code == 200){
      let list = res1.data.map((item, index) => { return {...item, key: index, source: 'okr'}})
      // let list2 = res2.data.map((item, index) => { return {...item, key: index, source: 'project'}})
      let newList = list.concat(cacheList);
      setData(newList || [])
    }
  }
  const convertQuarter = (quarter) => {
    let txt = '';
    switch (quarter){
      case '0': txt = '年度'; break;
      case '1': txt = '一季度'; break;
      case '2': txt = '二季度'; break;
      case '3': txt = '三季度'; break;
      case '4': txt = '四季度'; break;
      default: txt = '年度'; break;
    }
    return txt;
  }
  const goDetail = (record) => {
    if(record.source === 'okr'){
      history.push({
        pathname: '/newokr',
        query: {
          category: record.type, // 创建个人还是部门
          departmentId: record.departmentId, 
          id: record.id,
        },
      });
    }else {
      history.push({
        pathname: '/newproject',
        query: {
          type: record.oneself === '1' ? '' : '2',
          id: record.id,
        },
      });
    }
   
  }
  const onChange = (key) => {
    setKeys(key)
  }
  const columns = [
    {
      title: 'OKR',
      dataIndex: 'content',
      key: 'content',
      align: 'center',
      render: (text, record) => (<div style={{ color: '#6859c6', fontWeight: '700' }}>{record.content || record.objectiveList[0].oname} </div>)
    },
    {
      title: '负责人',
      dataIndex: 'username',
      key: 'username',
      align: 'center',
      render: (text, record) => (<div style={{ color: '#6859c6', fontWeight: '700' }}>{record.source === 'okr' ? text : record.master} </div>)
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      align: 'center',
      render: (text, record) => (<div style={{ color: '#6859c6', fontWeight: '700' }}>{record.source === 'okr' ? (record.type == '1' ? `个人OKR` : `部门OKR`) : '项目'} </div>)
    },
    {
      title: '周期',
      dataIndex: 'time',
      key: 'time',
      align: 'center',
      render: (text, record) => (<div style={{ color: '#6d5ac8' }}>{record.source === 'okr' ? `${record.year}-${convertQuarter(record.quarter)}` : '--'}</div>)
    },
    // {
    //   title: '状态',
    //   dataIndex: 'status',
    //   key: 'status',
    //   align: 'center',
    //   render: (text, record)=>(<>{record.source === 'okr' ? <Tag style={{ height: '24px' }} color={statusColorMap.get(text+'')}>{statusTextMap.get(text+'')}</Tag>:<Tag style={{ height: '24px' }} color={projectColor.get(text+'')}>{projectText.get(text+'')}</Tag>}</>)
    // },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      align: 'center',
      render: (text, record) => (<div>
        <Button type='primary' onClick={()=>goDetail(record)}>{record.oneself == '0' ? '审核通过' : '继续完成'}</Button>
        {record.oneself == '0' && <Button type='primary' onClick={()=>goDetail(record)} style={{marginLeft: '10px'}}>驳回</Button>}
        </div>)
    },
  ]
  const renderTab1 = () => {
    return <div>
        {keys == '1' && <Table columns={columns} dataSource={data.length > 0 ? data.filter(item => item.oneself == '1') : []} bordered />}
    </div>
  }
  const renderTab2 = () => {
    return <div>
       {keys == '2' &&<Table columns={columns} dataSource={data.length > 0 ? data.filter(item => item.oneself != '1') : []} bordered />}
    </div>
  }
  const items = [
    {
      key: '1',
      label: '我发起',
      children: renderTab1(),
    },
    {
      key: '2',
      label: '我审核',
      children: renderTab2(),
    },
  ]
  return (
    <div className={styles.tableWrap}>
      {/* <div className={styles.listWrap}>待处理OKR</div> */}
      <Tabs activeKey={keys} onChange={onChange} items={items} />
    </div>
  )
}

export default TodoPage